<template>
    <div class="news-detail-page">
        <header class="farm-header" :class="{ 'scrolled': isScrolled }">
            <div class="container">
                <el-row align="middle" justify="space-between">
                    <el-col :span="12">
                        <div class="logo-container">
                            <img class="logo" src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt="吱吱农场 Logo">
                            <span class="welcome-text">欢迎来到吱吱农场</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <nav class="main-nav">
                            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                                <el-menu-item index="1">首页</el-menu-item>
                                <el-menu-item index="2">叽喳聊天</el-menu-item>
                                <el-menu-item index="3">果蔬中心</el-menu-item>
                                <el-menu-item index="4">果蔬行情</el-menu-item>
                                <el-menu-item index="5">吱吱农场</el-menu-item>
                            </el-menu>
                        </nav>
                    </el-col>
                </el-row>
            </div>
        </header>

        <div class="top-image-container">
            <div class="top-image">
                <img src="https://img-baofun.zhhainiao.com/fs/a4958c48920e44718ef41309581aa0bd.jpg" alt="Farm scenery" />
            </div>
        </div>

        <div class="main-content">
            <main class="news-detail-main container">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
                </el-breadcrumb>

                <article class="news-article" v-if="newsItem">
                    <h1 class="news-title">{{ newsItem.title }}</h1>
                    <div class="news-meta">
                        <span class="news-date">发布日期: {{ newsItem.date }}</span>
                        <span class="news-author">作者: {{ newsItem.author }}</span>
                    </div>
                    <img :src="newsItem.image" :alt="newsItem.title" class="news-image">
                    <div class="news-content" v-html="newsItem.fullContent"></div>
                </article>

                <div v-else class="news-not-found">
                    <el-result icon="warning" title="资讯未找到" sub-title="抱歉，您请求的资讯不存在或已被删除。">
                        <template #extra>
                            <el-button type="primary" @click="goBack">返回上一页</el-button>
                        </template>
                    </el-result>
                </div>

                <section class="related-news" v-if="relatedNews.length">
                    <h2 class="section-title">相关资讯</h2>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :md="8" v-for="news in relatedNews" :key="news.id">
                            <el-card class="news-item" shadow="hover" @click="goToNews(news.id)">
                                <img :src="news.image" class="news-image" :alt="news.title" />
                                <div class="news-content">
                                    <h3>{{ news.title }}</h3>
                                    <p>{{ news.summary }}</p>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </section>
            </main>
        </div>
    </div>
    <Footer></Footer>
</template>
  
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Footer from "@/component/Footer.vue";

const route = useRoute();
const router = useRouter();

const activeIndex = ref('1');
const isScrolled = ref(false);

const newsItem = ref(null);
const relatedNews = ref([]);

// Simulated news data (in a real application, this would come from an API)
const newsData = [
    {
        id: 1,
        title: '有机蔬菜种植新技术',
        image: 'https://www.slalfood.com/static/upload/image/20230207/1675760537719613.png',
        date: '2023-05-15',
        author: '张三',
        summary: '我们的有机蔬菜种植基地，采用最新技术保证新鲜健康的农产品供应。',
        fullContent: `
        <p>在吱吱农场，我们一直致力于采用最先进的有机种植技术，以确保为消费者提供最优质、最健康的有机蔬菜。近日，我们引入了一项革命性的种植新技术，这不仅提高了产量，还进一步提升了蔬菜的营养价值。</p>
        <p>这项新技术主要包括以下几个方面：</p>
        <ul>
          <li>智能灌溉系统：根据土壤湿度和天气条件自动调节灌溉量，既节约水资源，又确保植物获得最佳水分。</li>
          <li>生物动力堆肥：利用特殊的堆肥配方，增强土壤肥力，提高植物抗病能力。</li>
          <li>天敌防治：引入益虫来控制有害昆虫，减少农药使用，保护生态平衡。</li>
          <li>光谱分析：通过分析植物叶片的光谱反射，及时发现并解决营养缺失问题。</li>
        </ul>
        <p>通过这些创新技术的应用，我们的有机蔬菜不仅口感更佳，营养更加丰富，还实现了更加环保、可持续的种植模式。欢迎大家来吱吱农场参观体验，亲身感受科技给农业带来的巨大变革！</p>
      `
    },
    {
        id: 2,
        title: '农场开放日活动圆满成功',
        image: 'https://www.huodongxing.com/file/ue/crawl/20180403/11CB90673A31D41C93E4BB3EC33468BAD9/835374646561621.png',
        date: '2023-06-01',
        author: '李四',
        summary: '上周末的农场开放日活动取得圆满成功，吸引了众多市民参与。',
        fullContent: `
        <p>在上周末，吱吱农场迎来了一年一度的开放日活动。本次活动以"亲近自然，体验农耕"为主题，吸引了来自全市各地的数百名市民参与。</p>
        <p>活动当天，我们为参与者准备了丰富多彩的项目：</p>
        <ul>
          <li>有机蔬菜采摘：让市民亲手采摘新鲜蔬菜，体验丰收的喜悦。</li>
          <li>农耕体验：教授传统耕作技巧，让参与者亲身感受农民的辛勤劳动。</li>
          <li>手工坊：教导制作简单的手工艺品，如稻草人、编织篮等。</li>
          <li>美食品尝：使用农场新鲜食材现场烹饪，让参与者品尝最地道的农家美食。</li>
        </ul>
        <p>活动中，我们的农业专家还为市民们讲解了有机种植的原理和重要性，提高了大家对健康饮食和环境保护的认识。</p>
        <p>看到孩子们在田间欢快奔跑，大人们认真学习农耕知识，我们深感欣慰。这次活动不仅让市民们更好地了解了农业生产，也拉近了城乡之间的距离。</p>
        <p>鉴于本次活动的成功，我们计划在未来举办更多类似的互动活动，欢迎大家持续关注吱吱农场的动态！</p>
      `
    },
    // ... 可以添加更多新闻项
];

// Fetch news item based on route parameter
const fetchNewsItem = (id) => {
    return newsData.find(item => item.id === parseInt(id));
};

// Fetch related news (excluding current news item)
const fetchRelatedNews = (currentId) => {
    return newsData
        .filter(item => item.id !== parseInt(currentId))
        .slice(0, 3); // Get up to 3 related news items
};

onMounted(() => {
    const newsId = route.params.id;
    newsItem.value = fetchNewsItem(newsId);
    if (newsItem.value) {
        relatedNews.value = fetchRelatedNews(newsId);
    }

    window.addEventListener('scroll', handleScroll);
});

const handleScroll = () => {
    isScrolled.value = window.scrollY > 50;
};

const handleSelect = (key, keyPath) => {
    switch (key) {
        case '1':
            router.push('/')
            break;
        case '2':
            router.push('/chatroom')
            break;
        case '3':
            router.push('/fruitCentre')
            break;
        case '4':
            router.push('/fruitMarket')
            break;
        case '5':
            router.push('/ziziFarm')
            break;
        default:
            break;
    }

    console.log(key, keyPath);
};

const goBack = () => {
    router.back();
};

const goToNews = (id) => {
    router.push({ name: 'newsDetail', params: { id } });
};
</script>
  
<style scoped>
.news-detail-page {
    font-family: 'Arial', sans-serif;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.farm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 0;
    transition: all 0.3s ease;
    background-color: rgba(76, 175, 80, 0.6);
}

.farm-header.scrolled {
    background-color: rgba(76, 175, 80, 1);
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    margin-right: 15px;
}

.welcome-text {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

.main-nav {
    display: flex;
    justify-content: flex-end;
}

.el-menu {
    background-color: transparent;
    border-bottom: none;
}

.el-menu-item {
    color: white !important;
}

.el-menu-item.is-active {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.main-content {
    padding-top: 100px;
}

.news-detail-main {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.news-article {
    margin-top: 20px;
}

.news-title {
    color: #2e7d32;
    font-size: 2rem;
    margin-bottom: 10px;
}

.news-meta {
    color: #666;
    margin-bottom: 20px;
}

.news-date,
.news-author {
    margin-right: 15px;
}

.news-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.news-content {
    line-height: 1.6;
}

.section-title {
    color: #4caf50;
    margin: 40px 0 20px;
}

.news-item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.news-item:hover {
    transform: translateY(-5px);
}

.news-item .news-image {
    height: 200px;
}

.news-item .news-content {
    padding: 15px;
}

.news-item h3 {
    color: #4caf50;
    margin-top: 0;
}

@media (max-width: 768px) {
    .welcome-text {
        display: none;
    }

    .main-nav {
        justify-content: center;
    }

    .news-title {
        font-size: 1.5rem;
    }

    .news-image {
        max-height: 300px;
    }
}

.top-image-container {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.top-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
</style>